<template>
  <nut-popup :visible="visible" position="center" @click-overlay="handleClose">
    <view class="customer-service-modal bg-white rounded-[24rpx] p-[40rpx] w-[540rpx]">
      <!-- 关闭按钮 -->
      <view class="close-btn absolute top-[20rpx] right-[20rpx] z-[10]" @click="handleClose">
        <IconFont name="close" size="20" class="text-[#999999]" />
      </view>

      <!-- 客服图标 -->
      <view class="service-icon flex justify-center mb-[30rpx]">
        <view class="w-[80rpx] h-[80rpx] bg-[#E6F7FF] rounded-full flex items-center justify-center">
          <IconFont name="service" size="40" class="text-[#1890FF]" />
        </view>
      </view>

      <!-- 标题 -->
      <view class="modal-title text-center mb-[30rpx]">
        <text class="text-[36rpx] font-bold text-[#1890FF]">联系客服</text>
      </view>

      <!-- 说明文字 -->
      <view class="modal-description mb-[40rpx]">
        <text class="text-[28rpx] text-[#666666] leading-[40rpx] text-center block">
          我们为您提供多种联系方式，请选择最便捷的方式联系我们
        </text>
      </view>

      <!-- 联系方式列表 -->
      <view class="contact-list">
        <view 
          class="contact-item flex items-center justify-between p-[30rpx] mb-[20rpx] bg-[#F8F9FA] rounded-[16rpx] border border-[#E9ECEF]"
          v-for="(contact, index) in contactMethods" 
          :key="index"
          @click="handleContactClick(contact)"
        >
          <view class="contact-info flex items-center">
            <!-- <view class="contact-icon mr-[20rpx]">
              <IconFont :name="contact.icon" size="24" class="text-[#1890FF]" />
            </view> -->
            <view class="contact-details">
              <text class="text-[32rpx] font-semibold text-[#333333] block">{{ contact.title }}</text>
              <text class="text-[26rpx] text-[#666666] block">{{ contact.description }}</text>
            </view>
          </view>
          <view class="contact-arrow">
            <IconFont name="arrow-right" size="20" class="text-[#999999]" />
          </view>
        </view>
      </view>

      <!-- 工作时间提示 -->
      <!-- <view class="work-time-tip bg-[#FFF7E6] rounded-[12rpx] p-[20rpx] mt-[30rpx]">
        <view class="flex items-center">
          <IconFont name="clock" size="20" class="text-[#FAAD14] mr-[12rpx]" />
          <text class="text-[24rpx] text-[#FAAD14]">工作时间：周一至周日 9:00-21:00</text>
        </view>
      </view> -->

      <!-- 取消按钮 -->
      <view class="modal-actions mt-[40rpx] flex-center">
        <nut-button 
          type="default" 
          class="w-full"
          @click="handleClose"
        >
          取消
        </nut-button>
      </view>
    </view>
  </nut-popup>
</template>

<script setup lang="ts">
import { IconFont } from '@nutui/icons-vue-taro';
import Taro from '@tarojs/taro';

interface ContactMethod {
  icon: string;
  title: string;
  description: string;
  action: 'phone' | 'wechat' | 'email' | 'online';
  value: string;
}

interface Props {
  visible: boolean;
  contactMethods?: ContactMethod[];
}

interface Emits {
  (e: 'update:visible', value: boolean): void;
  (e: 'close'): void;
}

const props = withDefaults(defineProps<Props>(), {
  contactMethods: () => [
    {
      icon: 'phone',
      title: '电话客服',
      description: '400-123-4567',
      action: 'phone',
      value: '400-123-4567'
    },
    {
      icon: 'wechat',
      title: '微信客服',
      description: '扫码添加客服微信',
      action: 'wechat',
      value: 'customer_service_wechat'
    },
    {
      icon: 'email',
      title: '邮件客服',
      description: 'service@example.com',
      action: 'email',
      value: 'service@example.com'
    },
    // {
    //   icon: 'chat',
    //   title: '在线客服',
    //   description: '点击进入在线聊天',
    //   action: 'online',
    //   value: 'online_chat'
    // }
  ]
});

const emit = defineEmits<Emits>();

const handleClose = () => {
  emit('update:visible', false);
  emit('close');
};

const handleContactClick = (contact: ContactMethod) => {
  switch (contact.action) {
    case 'phone':
      Taro.makePhoneCall({
        phoneNumber: contact.value,
        success: () => {
          console.log('拨打电话成功');
        },
        fail: (err) => {
          console.error('拨打电话失败:', err);
          Taro.showToast({
            title: '拨打电话失败',
            icon: 'error',
            duration: 2000
          });
        }
      });
      break;
      
    case 'wechat':
      Taro.showModal({
        title: '微信客服',
        content: `请添加微信号：${contact.value}`,
        confirmText: '复制微信号',
        cancelText: '取消',
        success: (res) => {
          if (res.confirm) {
            Taro.setClipboardData({
              data: contact.value,
              success: () => {
                Taro.showToast({
                  title: '微信号已复制',
                  icon: 'success',
                  duration: 2000
                });
              }
            });
          }
        }
      });
      break;
      
    case 'email':
      Taro.setClipboardData({
        data: contact.value,
        success: () => {
          Taro.showToast({
            title: '邮箱地址已复制',
            icon: 'success',
            duration: 2000
          });
        }
      });
      break;
      
    case 'online':
      Taro.navigateTo({
        url: '/pages/customer-service/chat',
        fail: () => {
          Taro.showToast({
            title: '在线客服功能开发中',
            icon: 'none',
            duration: 2000
          });
        }
      });
      break;
  }
};
</script>

<style scoped>
.customer-service-modal {
  position: relative;
}

.close-btn {
  cursor: pointer;
}

.contact-item {
  cursor: pointer;
  transition: all 0.3s ease;
}

.contact-item:hover {
  background-color: #E6F7FF;
  border-color: #1890FF;
}

.contact-item:active {
  transform: scale(0.98);
}
</style>
